<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>在 vuex 中 使用 ts 的时候出现的问题: | TBlog</title>
    <meta name="description" content="TBlog with vitePress">
    <link rel="stylesheet" href="/interview/assets/style.9156a4ed.css">
    <link rel="modulepreload" href="/interview/assets/Home.b86443e2.js">
    <link rel="modulepreload" href="/interview/assets/app.49accf37.js">
    <link rel="modulepreload" href="/interview/assets/solution_index.md.987aa705.lean.js">
    <link rel="modulepreload" href="/interview/assets/app.49accf37.js">
    <link rel="icon" href="/favicon.ico">
    <meta name="twitter:title" content="在 vuex 中 使用 ts 的时候出现的问题: | TBlog">
    <meta property="og:title" content="在 vuex 中 使用 ts 的时候出现的问题: | TBlog">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-7161a24b><div class="sidebar-button" data-v-7161a24b><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/interview/" aria-label="TBlog, back to home" data-v-7161a24b data-v-4a583abe><!----> TBlog</a><div class="flex-grow" data-v-7161a24b></div><div class="nav" data-v-7161a24b><nav class="nav-links" data-v-7161a24b data-v-15acbf05><!--[--><div class="item" data-v-15acbf05><div class="nav-link" data-v-15acbf05 data-v-641633f9><a class="item isExternal" href="http://101.43.7.188:66" target="_blank" rel="noopener noreferrer" data-v-641633f9>Music <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-641633f9><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-15acbf05><div class="nav-link" data-v-15acbf05 data-v-641633f9><a class="item isExternal" href="http://101.43.7.188:80" target="_blank" rel="noopener noreferrer" data-v-641633f9>CMC <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-641633f9><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-15acbf05><div class="nav-link" data-v-15acbf05 data-v-641633f9><a class="item isExternal" href="https://juejin.cn/user/2163479676978734/posts" target="_blank" rel="noopener noreferrer" data-v-641633f9>掘金 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-641633f9><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-15acbf05><div class="nav-link" data-v-15acbf05 data-v-641633f9><a class="item isExternal" href="https://gitee.com/tu_zhiwei98" target="_blank" rel="noopener noreferrer" data-v-641633f9>Gitee <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-641633f9><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><!----></nav></div><!--[--><!--]--></header><aside class="sidebar" data-v-6b49cdcd><nav class="nav-links nav" data-v-6b49cdcd data-v-15acbf05><!--[--><div class="item" data-v-15acbf05><div class="nav-link" data-v-15acbf05 data-v-641633f9><a class="item isExternal" href="http://101.43.7.188:66" target="_blank" rel="noopener noreferrer" data-v-641633f9>Music <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-641633f9><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-15acbf05><div class="nav-link" data-v-15acbf05 data-v-641633f9><a class="item isExternal" href="http://101.43.7.188:80" target="_blank" rel="noopener noreferrer" data-v-641633f9>CMC <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-641633f9><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-15acbf05><div class="nav-link" data-v-15acbf05 data-v-641633f9><a class="item isExternal" href="https://juejin.cn/user/2163479676978734/posts" target="_blank" rel="noopener noreferrer" data-v-641633f9>掘金 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-641633f9><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-15acbf05><div class="nav-link" data-v-15acbf05 data-v-641633f9><a class="item isExternal" href="https://gitee.com/tu_zhiwei98" target="_blank" rel="noopener noreferrer" data-v-641633f9>Gitee <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-641633f9><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><!----></nav><!--[--><!--]--><ul class="sidebar-links" data-v-6b49cdcd><!--[--><li class="sidebar-link"><p class="sidebar-link-item">Vue3.2X</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Vue/">基本语法&amp;使用</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Vue/VueX">VueX4.x</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Vue/Router">Router4.x</a><!----></li><li class="sidebar-link"><p class="sidebar-link-item">部分源码解析</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Vue/reactive">响应式系统</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Vue/source/Watch">Watch</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Vue/source/nextTick">nextTick</a><!----></li></ul></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">WebPack</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/WebPack/">基础配置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/WebPack/optimize">优化方案</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/WebPack/common">常见的Loader以及Plugin</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/WebPack/custom">自定义Loader以及Plugin</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/WebPack/advanced">手写简单的MY_Webpack</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Javascript</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Javascript/">基本语法</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Javascript/advanced">高级语法</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">TypeScript</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/TypeScript/">基本语法</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/TypeScript/combat">业务实战</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/TypeScript/advanced">高阶使用</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">浏览器相关</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Browser/">基本原理</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Browser/plugin">浏览器插件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Browser/advanced">深入原理</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">计算机网络</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Network/">计算机网络</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Network/security">前端安全</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">HTML/CSS</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/CSS/">CSS</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/HTML/">HTML</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Vite2.X</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Vite/">基础配置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Vite/optimize">原理以及优化</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Node</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Node/">基本知识</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Node/pit">踩坑记录</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">其他前端工具</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Git/">Git</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Jenkins/">Jenkins</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/npm/">包管理工具</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">踩坑记录以及经验</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Pit/">踩坑</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="/interview/solution/">一些解决方案</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#在-vuex-中-使用-ts-的时候出现的问题">在 vuex 中 使用 ts 的时候出现的问题:</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#当我们刷新时-如何处理-vuex-存储在内存中的数据">当我们刷新时 如何处理 vuex 存储在内存中的数据</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#表格系列">表格系列</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#导出-excel-表格">导出 excel 表格</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#一、安装依赖">一、安装依赖</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#二、引入依赖">二、引入依赖</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#三、提供用于导出的表格">三、提供用于导出的表格</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#四、定义导出方法">四、定义导出方法</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#五、注意事项">五、注意事项</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#前言">前言</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#环境">环境</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#步骤">步骤</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#_1-创建项目">1. 创建项目</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#_2-规划目录">2. 规划目录</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#_3-项目配置">3. 项目配置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#_4-开发组件">4. 开发组件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#_5-编写示例">5. 编写示例</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#_6-发布组件">6. 发布组件</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#_7-测试">7. 测试</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="#vite-动态引入图片">vite 动态引入图片</a><!----></li></ul></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">面经</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Interview/">xxx面试</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Interview/two">xxX面试</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">个人学习历程</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Myself/">个人情况说明</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Myself/pre">入行工作前</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/interview/Myself/one">工作第一年</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-7eddb2c4><div class="container" data-v-7eddb2c4><!--[--><!--]--><div style="position:relative;" class="content" data-v-7eddb2c4><div><pre><code>	VueX 对 Typescript  的使用 技巧
</code></pre><h2 id="在-vuex-中-使用-ts-的时候出现的问题"><a class="header-anchor" href="#在-vuex-中-使用-ts-的时候出现的问题" aria-hidden="true">#</a> 在 vuex 中 使用 ts 的时候出现的问题:</h2><ul><li><p>​ 在 vuex 进行多模块处理的时候,想使用其中某一个模块中的数据, 不能进行代码提示</p><hr><p>问题复现:</p></li></ul><div class="language-typescript"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vuex&#39;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> IRootState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@/store/types&#39;</span>  <span class="token comment">// 导入 根state的类型</span>
<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token generic-function"><span class="token function">useStore</span><span class="token generic class-name"><span class="token operator">&lt;</span>IRoorState<span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">userMenus</span><span class="token template-punctuation string">`</span></span> <span class="token operator">=</span> store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>login    <span class="token comment">//  这里的 login 属于 一个模块 但是并不能读取login模块 会导致报错</span>
									 <span class="token comment">//  代码提示也是只能提示 在根state中的数据</span>
</code></pre></div><p>解决方案</p><ol><li><p>使用 pinia 库</p></li><li><p>对 useStore 进行自己的封装</p><hr><p>代码实现 ::</p></li></ol><div class="language-typescript"><pre><code><span class="token comment">// 在store &gt;&gt; 下的 index.ts中 返回一个 useStore()</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> ILoginState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;./login/type&#39;</span>          <span class="token comment">//  这是login 数据类型</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> ISystemState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;./main/system/types&#39;</span>   <span class="token comment">//  这是其他 模块的数据类型</span>

<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">IRootState</span> <span class="token punctuation">{</span>          <span class="token comment">//  这是 vuex 的根 数据类型</span>
  name<span class="token operator">:</span> <span class="token builtin">string</span>
  age<span class="token operator">:</span> <span class="token builtin">number</span>
  entireDeparment<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  entireRole<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">IRootWithModule</span> <span class="token punctuation">{</span>    <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">这是我们自定义的 模块数据类型接口 </span><span class="token template-punctuation string">`</span></span>
  login<span class="token operator">:</span> ILoginState
  systemModule<span class="token operator">:</span> ISystemState
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">type</span> <span class="token class-name">IStoreType</span> <span class="token operator">=</span> IRootState <span class="token operator">&amp;</span> IRootWithModule     <span class="token string">&#39;通过交叉类型 将我们的模块数据类型 与 根数据类型 结合起来&#39;</span>

</code></pre></div><hr><p>store &gt;&gt;&gt; index.ts 文件</p><div class="language-typescript"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> useStore <span class="token keyword">as</span> useVuexStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vuex&quot;</span><span class="token punctuation">;</span> <span class="token comment">// 为了防止重名误解 ,这里起了个别名</span>

<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">useStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> Store<span class="token operator">&lt;</span>IStoreType<span class="token operator">&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">useVuexStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token string">&quot;这样处理过后 在使用store.xxx 模块的时候 就不会报错而且会有准确 代码提示 来保证我们代码的准确性&quot;</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">在我们需要使用 store 的使用 导入 @/store 中的usestore 就可以了 不再使用 &#39;vuex&#39;中的</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
</code></pre></div><h3 id="当我们刷新时-如何处理-vuex-存储在内存中的数据"><a class="header-anchor" href="#当我们刷新时-如何处理-vuex-存储在内存中的数据" aria-hidden="true">#</a> 当我们刷新时 如何处理 vuex 存储在内存中的数据</h3><p>因为 vuex 中保存的数据是保存在内存中的 刷新时会失去数据 a</p><p>而在我们的一般的后台管理系统中 , token 是保存在 localstorage 中的 ,所以在 判断登录成功 但是刷新之后 vuex 中是没有数据的</p><p>而没有 进行操作 登录的那一步, vuex 中是没有保存 token 的数据的 但是我们根据的是 localstorage 中的 token 来判断是处于登录的状态</p><p>解决::</p><div class="language-typescript"><pre><code><span class="token comment">// 在store &gt;&gt; 下的 index.ts中 封装一个函数</span>

<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">setupStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">表示的是 对store的数据进行初始化 </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
  store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&quot;login/loadLocalLogin&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//  login 模块下的    loadLocalLogin的action</span>
<span class="token punctuation">}</span>
</code></pre></div><p>在 login 模块中</p><div class="language-typescript"><pre><code><span class="token function">loadLocalLogin</span><span class="token punctuation">(</span><span class="token punctuation">{</span> commit<span class="token punctuation">,</span> dispatch <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>                           <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">对我们通过登录操作获得的数据 保留在vuex中</span><span class="token template-punctuation string">`</span></span>
      <span class="token keyword">const</span> token <span class="token operator">=</span> localCache<span class="token punctuation">.</span><span class="token function">getCache</span><span class="token punctuation">(</span><span class="token string">&#39;token&#39;</span><span class="token punctuation">)</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>token<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&#39;changeToken&#39;</span><span class="token punctuation">,</span> token<span class="token punctuation">)</span>
        <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&#39;getInitialDataAction&#39;</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> root<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">const</span> userInfo <span class="token operator">=</span> localCache<span class="token punctuation">.</span><span class="token function">getCache</span><span class="token punctuation">(</span><span class="token string">&#39;userInfo&#39;</span><span class="token punctuation">)</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>userInfo<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&#39;changeUserInfo&#39;</span><span class="token punctuation">,</span> userInfo<span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">const</span> userMenus <span class="token operator">=</span> localCache<span class="token punctuation">.</span><span class="token function">getCache</span><span class="token punctuation">(</span><span class="token string">&#39;userMenus&#39;</span><span class="token punctuation">)</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>userMenus<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&#39;changeUserMenus&#39;</span><span class="token punctuation">,</span> userMenus<span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token function">phoneLoginAcction</span><span class="token punctuation">(</span><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">,</span> playload<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;执行了phoneLoginacction&#39;</span><span class="token punctuation">,</span> playload<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
</code></pre></div><p>store 数据初始化函数的调用</p><div class="language-typescript"><pre><code><span class="token operator">&gt;&gt;</span> 在 main<span class="token punctuation">.</span>ts 中 导入并使用
<span class="token keyword">import</span> <span class="token punctuation">{</span> setupStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;./store&#39;</span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>store<span class="token punctuation">)</span>
<span class="token function">setupStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

</code></pre></div><p>通过这样的处理 , 我们刷新之后也能保留用户登录的状态 以及保存 用户通过登录这一步操作获得的数据</p><p>工作学习中各种情况的解决方案</p><p>通过前端 将 element UI 中的 tab 表格导出 excel 表格</p><h2 id="表格系列"><a class="header-anchor" href="#表格系列" aria-hidden="true">#</a> 表格系列</h2><h3 id="导出-excel-表格"><a class="header-anchor" href="#导出-excel-表格" aria-hidden="true">#</a> 导出 excel 表格</h3><h3 id="一、安装依赖"><a class="header-anchor" href="#一、安装依赖" aria-hidden="true">#</a> 一、安装依赖</h3><div class="language-undefined"><pre><code>cnpm i file-saver xlsx -S
</code></pre></div><h3 id="二、引入依赖"><a class="header-anchor" href="#二、引入依赖" aria-hidden="true">#</a> 二、引入依赖</h3><p>在需要导出 Excel 的页面（如<code>user.vue</code>）引入<code>file-saver</code>和<code>xlsx</code></p><div class="language-jsx"><pre><code><span class="token keyword">import</span> FileSaver <span class="token keyword">from</span> <span class="token string">&quot;file-saver&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token constant">XLSX</span> <span class="token keyword">from</span> <span class="token string">&quot;xlsx&quot;</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="三、提供用于导出的表格"><a class="header-anchor" href="#三、提供用于导出的表格" aria-hidden="true">#</a> 三、提供用于导出的表格</h3><p>除了用于展示的表格以外，还要准备一个用于下载的表格（非必须，但是推荐，后面注意事项中会提到这样做的理由）该表格一般不可见，即<code>display: none;</code>，并且为其设置一个<code>id</code>，如<code>id=&quot;export-table1&quot;</code>，作用是告诉程序将来要导出哪个表格的数据，对应下文<code>exportExcel</code>方法中的<code>document.querySelector(&#39;#export-table1&#39;)</code>。</p><div class="language-xml"><pre><code><span class="token comment">&lt;!--用于展示的表格，用户想下载的表格--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table</span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!--导出按钮--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>exportExcel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>导出Excel<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!--用于导出Excel的隐藏表格，用户实际导出的表格--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table</span>
  <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>export-table1<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>user<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>display: none;<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>姓名<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gender<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>性别<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span> <span class="token attr-name">property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>age<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>年龄<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="四、定义导出方法"><a class="header-anchor" href="#四、定义导出方法" aria-hidden="true">#</a> 四、定义导出方法</h3><div class="language-tsx"><pre><code><span class="token function">exportExcel</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 导出的内容只做解析，不进行格式转换</span>
  <span class="token keyword">let</span> xlsxParam <span class="token operator">=</span> <span class="token punctuation">{</span> raw<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
  <span class="token keyword">let</span> wb <span class="token operator">=</span> <span class="token keyword">null</span>
  <span class="token keyword">let</span> tableName <span class="token operator">=</span> <span class="token string">&#39;&#39;</span>
  <span class="token keyword">let</span> randomString <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">randomString</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)</span>
  wb <span class="token operator">=</span> <span class="token constant">XLSX</span><span class="token punctuation">.</span>utils<span class="token punctuation">.</span><span class="token function">table_to_book</span><span class="token punctuation">(</span>
    document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;#export-table1&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    xlsxParam
  <span class="token punctuation">)</span>
  <span class="token comment">// 这里的randomString非必须，只是生成一串随机码</span>
  <span class="token comment">// 便于下载多个文件而不重名</span>
  tableName <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">用户表-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>randomString<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.xlsx</span><span class="token template-punctuation string">`</span></span>

  <span class="token comment">/* get binary string as output */</span>
  <span class="token keyword">let</span> wbout <span class="token operator">=</span> <span class="token constant">XLSX</span><span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>wb<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    bookType<span class="token operator">:</span> <span class="token string">&#39;xlsx&#39;</span><span class="token punctuation">,</span>
    bookSST<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    type<span class="token operator">:</span> <span class="token string">&#39;array&#39;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token keyword">try</span> <span class="token punctuation">{</span>
    <span class="token comment">// eslint-disable-next-line no-undef</span>
    FileSaver<span class="token punctuation">.</span><span class="token function">saveAs</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">(</span><span class="token punctuation">[</span>wbout<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">&#39;application/octet-stream&#39;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> tableName<span class="token punctuation">)</span>
  <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token builtin">console</span> <span class="token operator">!==</span> <span class="token string">&#39;undefined&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> wbout<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">&#39;导出成功&#39;</span><span class="token punctuation">)</span>
  <span class="token keyword">return</span> wbout
<span class="token punctuation">}</span>
</code></pre></div><p>代码中的<code>tableName</code>变量就是将来下载的 Excel 的文件名，为了防止多次下载而重名，所以后面加了一段随机码，下面附上生成随机码的方法：</p><div class="language-jsx"><pre><code><span class="token comment">// 生成len位随机码</span>
<span class="token function">randomString</span> <span class="token punctuation">(</span><span class="token parameter">len</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  len <span class="token operator">=</span> len <span class="token operator">||</span> <span class="token number">32</span>
  <span class="token comment">// 屏蔽了容易让人混淆的字符，比如数字1和字母l,，数字0和字母o……</span>
  <span class="token keyword">var</span> chars <span class="token operator">=</span> <span class="token string">&#39;ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678&#39;</span>
  <span class="token keyword">var</span> maxPos <span class="token operator">=</span> chars<span class="token punctuation">.</span>length
  <span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">&#39;&#39;</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> len<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    str <span class="token operator">+=</span> chars<span class="token punctuation">.</span><span class="token function">charAt</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> maxPos<span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> str
<span class="token punctuation">}</span>
</code></pre></div><h3 id="五、注意事项"><a class="header-anchor" href="#五、注意事项" aria-hidden="true">#</a> 五、注意事项</h3><ol><li>用于导出的表格有多少条数据，导出的 Excel 就有多少条。如果希望导出所有数据，那么该表格就不能设置分页（假设设置每页 20 条，导出的 Excel 也只有 20 条），所以建议额外准备一个隐藏表格专门用于导出 Excel；</li><li>点击导出按钮执行<code>exportExcel</code>方法，如果发现导出的 Excel 数据不全或者只有表头，可能是因为点击过快造成数据还未渲染完成，可以在点击事件中设置一定时间的延迟（比如 1000 毫秒），以确保数据成功渲染；</li><li>隐藏表格应保持尽可能的简洁，删掉所有的 fixed（设置了列冻结的表格导出后可能会生成多份）、不必要的样式、排序、分组等属性，只确保基本数据能渲染成功即可。</li></ol><h1 id="不同操作系统下的路径问题"><a class="header-anchor" href="#不同操作系统下的路径问题" aria-hidden="true">#</a> 不同操作系统下的路径问题</h1><div class="language-apl"><pre><code>path<span class="token dyadic-operator operator">.</span>posix<span class="token dyadic-operator operator">.</span>join<span class="token punctuation">(</span><span class="token string">&#39;xx/xx/a&#39;</span><span class="token function">,</span><span class="token string">&#39;xx/xx/b&#39;</span><span class="token punctuation">)</span> <span class="token function">=</span><span class="token function">=</span><span class="token function">=</span><span class="token function">&gt;</span> <span class="token string">&#39;xx/xx\b&#39;</span>
</code></pre></div><p>为了要获取到符合 <code>/</code> 格式的路径，我们可以使用 <code>PATH</code> 模块提供的 <code>path.sep</code> <a href="https://link.zhihu.com/?target=https%3A//nodejs.org/dist/latest-v12.x/docs/api/path.html%23path_path_sep" target="_blank" rel="noopener noreferrer">接口</a>进行字符串匹配截取，接口会根据系统环境的不同进行匹配截取。</p><ul><li>Windows 上是 \</li><li>POSIX 上是 /</li></ul><p>在 Windows 上，正斜杠 / 和反斜杠 \ 都被接受作为路径片段分隔符；但是，path 方法只添加反斜杠 \。</p><p>--最终的解决方案--</p><p>string.split(path.sep).join(&#39;/&#39;)</p><h1 id="关于-vue3-使用-use-使用插件遇到-的问题"><a class="header-anchor" href="#关于-vue3-使用-use-使用插件遇到-的问题" aria-hidden="true">#</a> 关于 vue3 使用 use() 使用插件遇到 的问题</h1><p>在项目中,出现了刷新,url 改变了,但是路由 routes 对象却匹配到了 404 notfound 组件</p><div class="language-typescript"><pre><code><span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">registerApp</span><span class="token punctuation">(</span>app<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">setupStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>router<span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>store<span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">&quot;#app&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>这里 使用 use(router) 的时候 会自动执行 install() {}函数 &gt;&gt; 这个函数 获取当前 path &gt;&gt; 并找到 router.routes &gt;&gt; 找到的是 notfound 组件</p><p>之后我们 调用 setupstore() =&gt; 我们在这里注册的动态 路由 routes</p><p>然后进行路由守卫(回调) &gt;&gt; to 这里打印的 to 虽然是匹配正确的组件 但是在这之前就已经匹配到了 not found</p><p>所以需要在 userouter 之前调用 setupstore 函数</p><h1 id="关于-在-vite-中使用-动态路由导入-报错"><a class="header-anchor" href="#关于-在-vite-中使用-动态路由导入-报错" aria-hidden="true">#</a> 关于 在 vite 中使用 动态路由导入 报错</h1><p>问题出现情况:</p><div class="language-typescript"><pre><code>  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">&#39;/main&#39;</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">&#39;main&#39;</span><span class="token punctuation">,</span>
    <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/views/main/main.vue&#39;</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><p>解决方案 npm install --save-dev @babel/plugin-syntax-dynamic-import</p><h1 id="关于在-vit-中-热更新-以及-预构建的问题"><a class="header-anchor" href="#关于在-vit-中-热更新-以及-预构建的问题" aria-hidden="true">#</a> 关于在 vit 中 热更新 以及 预构建的问题</h1><p>问题出现情况:</p><div class="language-typescript"><pre><code>css<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token comment">// modules: false</span>
  preprocessorOptions<span class="token operator">:</span> <span class="token punctuation">{</span>
    less<span class="token operator">:</span> <span class="token punctuation">{</span>
      additionalData<span class="token operator">:</span> <span class="token string">&quot;@import &#39;./src/assets/css/index.less&#39;;&quot;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>在 vite 中 如果更改了</p><ul><li>​ 一些公共文件的路径问题 尽量使用动态的相对路径</li><li>​ 一些 npm 包</li><li>​ 一些编译项</li><li>​ 等等</li></ul><p>需要重新进行 pnpm dev || npm run dev</p><p>原因所在 vite 会进行 预构建在.vite 里面 而热更新至少对于 .js vue ts 等不属于基础编译的文件</p><h1 id="关于-axios-请求-携带-token-的问题"><a class="header-anchor" href="#关于-axios-请求-携带-token-的问题" aria-hidden="true">#</a> 关于 Axios 请求 携带 Token 的问题</h1><div class="language-typescript"><pre><code>config<span class="token punctuation">.</span>headers<span class="token punctuation">.</span>Authorization <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Bearer </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>token<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
</code></pre></div><p>需要更后端 沟通 这个字段 不能随便乱传递</p><h1 id="关于-element-动态渲染表格问题"><a class="header-anchor" href="#关于-element-动态渲染表格问题" aria-hidden="true">#</a> 关于 element 动态渲染表格问题</h1><p>当我们的表格是不固定的需要 根据后端的参数来决定我们 的表格的每一列的表头时 可以采用以下方案</p><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-table-column</span>
  <span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.propName<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:property</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.prop<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in tableColumnList<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.prop<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">slot-scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>{{scope.row[scope.column.property]?scope.row[scope.column.property]:&#39;-&#39;}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-table-column</span><span class="token punctuation">&gt;</span></span>
-----------------------------------------------------------------------------
tableColumnList: [ ],
</code></pre></div><div class="language-javascript"><pre><code><span class="token keyword">const</span> taskPropList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">// eslint-disable-next-line array-callback-return</span>
res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">i</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">!==</span> <span class="token string">&quot;cal_date&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      taskPropList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>tableColumnList<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>taskPropList<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>taskTableColumnList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    prop<span class="token operator">:</span> item<span class="token punctuation">,</span>
    propName<span class="token operator">:</span> item<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>taskTableColumnList <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>taskTableColumnList<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="关于-vue3-2x-版本中-全局注册组件-拿不到组件名字的解决方案"><a class="header-anchor" href="#关于-vue3-2x-版本中-全局注册组件-拿不到组件名字的解决方案" aria-hidden="true">#</a> 关于 Vue3.2x 版本中 全局注册组件 拿不到组件名字的解决方案</h1><p>​ 本人猜测 是因为这个版本 中 加入了 setup 语法糖 不需要注册组件, 所以就没有 组件对应的名称</p><div class="language-typescript"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> App <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> TButton <span class="token keyword">from</span> <span class="token string">&quot;./TButton&quot;</span><span class="token punctuation">;</span>

<span class="token comment">// 所有组件列表</span>
<span class="token keyword">const</span> components <span class="token operator">=</span> <span class="token punctuation">[</span>TButton<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// 定义 install 方法， App 作为参数</span>
<span class="token keyword">const</span> install <span class="token operator">=</span> <span class="token punctuation">(</span>app<span class="token operator">:</span> App<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// 遍历注册所有组件</span>
  components<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>component<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> app<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">&quot;TButton&quot;</span><span class="token punctuation">,</span> component<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  components<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>component<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> app<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span>component<span class="token punctuation">.</span>name<span class="token punctuation">,</span> component<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token operator">/</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// console.log(TButton.name);</span>
<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> 提示 组件名称未定义</span><span class="token template-punctuation string">`</span></span>

<span class="token keyword">export</span> <span class="token punctuation">{</span> TButton <span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  install<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

</code></pre></div><p>解决方案, 首先想到的是 通过 node 可以读取本地文件 的功能 将文件名 当作 组件名称</p><p>这就需要规定 编写组件的时候 必须要跟文件夹名称 一致</p><div class="language-typescript"><pre><code><span class="token keyword">const</span> <span class="token function-variable function">getFileName</span> <span class="token operator">=</span> <span class="token punctuation">(</span>comment<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> comment<span class="token punctuation">.</span>__file
    <span class="token operator">?.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;/&quot;</span><span class="token punctuation">)</span>
    <span class="token punctuation">[</span>comment<span class="token punctuation">.</span>__file<span class="token operator">?.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;/&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;.&quot;</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h1 id="手把手教学：vue3-ts-组件库开发与发布"><a class="header-anchor" href="#手把手教学：vue3-ts-组件库开发与发布" aria-hidden="true">#</a> 手把手教学：VUE3+TS 组件库开发与发布</h1><h2 id="前言"><a class="header-anchor" href="#前言" aria-hidden="true">#</a> 前言</h2><p>当市面上主流的组件库不能满足我们业务需求的时候，那么我们就有必要开发一套属于自己团队的组件库。 以下用一个简单的组件来讲述基于 Vue3.0 + TS 的组件从开发到发布 npm 仓库的全过程（参考 element-plus）</p><h2 id="环境"><a class="header-anchor" href="#环境" aria-hidden="true">#</a> 环境</h2><p>这里列出本文所使用的环境版本</p><ul><li>vue 3.0</li><li>vue/cli 4.5.9</li><li>nodeJs 14.15.1</li><li>npm 6.14.8</li></ul><div class="language-shell"><pre><code><span class="token operator">&gt;</span> vue --version
@vue/cli <span class="token number">4.5</span>.9

<span class="token operator">&gt;</span> <span class="token function">npm</span> -v
<span class="token number">6.14</span>.8

<span class="token operator">&gt;</span> node -v
v14.15.1
复制代码
</code></pre></div><h2 id="步骤"><a class="header-anchor" href="#步骤" aria-hidden="true">#</a> 步骤</h2><h3 id="_1-创建项目"><a class="header-anchor" href="#_1-创建项目" aria-hidden="true">#</a> 1. 创建项目</h3><p>使用 vue-cli 创建一个 vue3 项目，假设项目名为 nandit-vue-vant</p><div class="language-shell"><pre><code><span class="token operator">&gt;</span> vue create nandit-vue-vant
复制代码
</code></pre></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ef8e9ab6b16b4f79b65ebe96ca95ebf7~tplv-k3u1fbpfcp-watermark.awebp?" alt="image-20211014170125300.png"></p><p>选择自定义 Manually select features，回车进入下一步</p><p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/529b736d5f14471483234f27edc4f8c4~tplv-k3u1fbpfcp-watermark.awebp?" alt="image-20211014170422210.png"></p><p>选中 Choose Vue version、Babel 、TypeScript、 CSS Pre-processors 这 4 项，回车进入下一步</p><ul><li>Choose a version of Vue.js that you want to start the project with 选择 3.x (Preview)</li><li>Use class-style component syntax? 输入 n</li><li>Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? 输入 y</li><li>Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default) 选择 Sass/SCSS (with dart-sass)</li><li>Where do you prefer placing config for Babel, ESLint, etc.? 选择 In dedicated config files</li><li>Save this as a preset for future projects? 输入 y，回车后输入模板名保存模板</li></ul><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e061d6296f444b2fa4ac76c51003b5e4~tplv-k3u1fbpfcp-watermark.awebp?" alt="image-20211014171215098.png"></p><p>最后回车，等待项目创建完成</p><p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9a9deb62ed214ea599b4ae2d405ee1ba~tplv-k3u1fbpfcp-watermark.awebp?" alt="image-20211014183254360.png"></p><p>创建完成，目录结构如图</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cfbed2688e8c4e7187af80f0611a5178~tplv-k3u1fbpfcp-watermark.awebp?" alt="image-20211014183353953.png"></p><h3 id="_2-规划目录"><a class="header-anchor" href="#_2-规划目录" aria-hidden="true">#</a> 2. 规划目录</h3><div class="language-json"><pre><code>├─ build         <span class="token comment">// 编辑打包脚本目录，用于存放脚本文件</span>
│  ├─ rollup.config.js
├─ docs          <span class="token comment">// 文档目录，用于生成 vuepress 文档页面</span>
│  ├─ .vuepress
│  ├─ guide
│  ├─ README.md
├─ examples      <span class="token comment">// 原 src 目录，改成 examples 用于示例展示</span>
│  ├─ App.vue
│  ├─ main.ts
├─ packages      <span class="token comment">// 新增 packages 目录，用于编写存放组件，如button</span>
│  ├─ button
│  ├─ index.ts
├─ typings      <span class="token comment">// 新增 typings 目录， 用于存放 .d.ts 文件，把 shims-vue.d.ts 移动到这里</span>
│  ├─ shims-vue.d.ts
├─ .npmignore    <span class="token comment">// 新增 .npmignore 配置文件</span>
├─ vue.config.js <span class="token comment">// 新增 vue.config.js 配置文件</span>
复制代码
</code></pre></div><p>将 <code>src</code> 目录改为 <code>examples</code> ，并将里面的 <code>assets</code> 和 <code>components</code> 目录删除，移除 <code>App.vue</code> 里的组件引用。</p><p>调整后的目录结构如图</p><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5543dbd1c6bd47d29543707c39aeeb6d~tplv-k3u1fbpfcp-watermark.awebp?" alt="image-20211018170732975.png"></p><h3 id="_3-项目配置"><a class="header-anchor" href="#_3-项目配置" aria-hidden="true">#</a> 3. 项目配置</h3><h4 id="_3-1-vue-config-js"><a class="header-anchor" href="#_3-1-vue-config-js" aria-hidden="true">#</a> 3.1 vue.config.js</h4><p>新增 vue.config.js 配置文件，适配重新规划后的项目目录</p><div class="language-js"><pre><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;path&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// 修改 pages 入口</span>
  pages<span class="token operator">:</span> <span class="token punctuation">{</span>
    index<span class="token operator">:</span> <span class="token punctuation">{</span>
      entry<span class="token operator">:</span> <span class="token string">&quot;examples/main.ts&quot;</span><span class="token punctuation">,</span> <span class="token comment">//入口</span>
      template<span class="token operator">:</span> <span class="token string">&quot;public/index.html&quot;</span><span class="token punctuation">,</span> <span class="token comment">//模板</span>
      filename<span class="token operator">:</span> <span class="token string">&quot;index.html&quot;</span><span class="token punctuation">,</span> <span class="token comment">//输出文件</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 扩展 webpack 配置</span>
  <span class="token function-variable function">chainWebpack</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// 新增一个 ~ 指向 packages 目录, 方便示例代码中使用</span>
    config<span class="token punctuation">.</span>resolve<span class="token punctuation">.</span>alias<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">&quot;~&quot;</span><span class="token punctuation">,</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">&quot;packages&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
复制代码<span class="token punctuation">;</span>
</code></pre></div><h4 id="_3-2-npmignore"><a class="header-anchor" href="#_3-2-npmignore" aria-hidden="true">#</a> 3.2 .npmignore</h4><p>新增 .npmignore 配置文件，组件发布到 npm 中，只有编译后的发布目录（例如 lib）、package.json、<a href="http://README.md" target="_blank" rel="noopener noreferrer">README.md</a> 才是需要被发布的，所以我们需要设置忽略目录和文件</p><div class="language-"><pre><code># 忽略目录
.idea
.vscode
build/
docs/
examples/
packages/
public/
node_modules/
typings/

# 忽略指定文件
babel.config.js
tsconfig.json
tslint.json
vue.config.js
.gitignore
.browserslistrc
*.map
复制代码
</code></pre></div><h4 id="_3-3-tsconfig-json"><a class="header-anchor" href="#_3-3-tsconfig-json" aria-hidden="true">#</a> 3.3 tsconfig.json</h4><p>修改 tsconfig.json 中 paths 的路径</p><div class="language-json"><pre><code>    <span class="token property">&quot;paths&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token property">&quot;@/*&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token string">&quot;src/*&quot;</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
复制代码
</code></pre></div><p>改为</p><div class="language-json"><pre><code>    <span class="token property">&quot;paths&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token property">&quot;~/*&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token string">&quot;packages/*&quot;</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
复制代码
</code></pre></div><p>修改 include 的路径</p><div class="language-json"><pre><code>  <span class="token property">&quot;include&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">&quot;src/**/*.ts&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;src/**/*.tsx&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;src/**/*.vue&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;tests/**/*.ts&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;tests/**/*.tsx&quot;</span>
  <span class="token punctuation">]</span>
复制代码
</code></pre></div><p>改为</p><div class="language-json"><pre><code>  <span class="token property">&quot;include&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">&quot;examples/**/*.ts&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;examples/**/*.tsx&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;examples/**/*.vue&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;packages/**/*.ts&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;packages/**/*.tsx&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;packages/**/*.vue&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;typings/**/*.ts&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;tests/**/*.ts&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;tests/**/*.tsx&quot;</span>
  <span class="token punctuation">]</span>
复制代码
</code></pre></div><h4 id="_3-4-package-json"><a class="header-anchor" href="#_3-4-package-json" aria-hidden="true">#</a> 3.4 package.json</h4><p>修改 package.json 中发布到 npm 的字段</p><ul><li><code>name</code>：包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。</li><li><code>version</code>：版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。</li><li><code>description</code>：描述。</li><li><code>main</code>：入口文件，该字段需指向我们最终编译后的包文件。</li><li><code>typings</code>：types 文件，TS 组件需要。</li><li><code>keyword</code>：关键字，以空格分离希望用户最终搜索的词。</li><li><code>author</code>：作者信息</li><li><code>private</code>：是否私有，需要修改为 false 才能发布到 npm</li><li><code>license</code>： 开源协议</li></ul><p>参考设置：</p><div class="language-json"><pre><code><span class="token punctuation">{</span>
  <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;nandit-vue-vant&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;version&quot;</span><span class="token operator">:</span> <span class="token string">&quot;0.1.0&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;private&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token property">&quot;description&quot;</span><span class="token operator">:</span> <span class="token string">&quot;基于vue3+vant的前端组件库&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;main&quot;</span><span class="token operator">:</span> <span class="token string">&quot;lib/index.min.js&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;module&quot;</span><span class="token operator">:</span> <span class="token string">&quot;lib/index.esm.js&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;typings&quot;</span><span class="token operator">:</span> <span class="token string">&quot;lib/index.d.ts&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;keyword&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vue3 vant&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;license&quot;</span><span class="token operator">:</span> <span class="token string">&quot;MIT&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;author&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;yourname&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;email&quot;</span><span class="token operator">:</span> <span class="token string">&quot;youremail@126.com&quot;</span>
  <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
复制代码
</code></pre></div><p>在 package.json 的 scripts 新增编译和发布的命令</p><div class="language-json"><pre><code><span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;yarn build:clean &amp;&amp; yarn build:lib &amp;&amp; yarn build:esm-bundle &amp;&amp; rimraf lib/demo.html&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;build:clean&quot;</span><span class="token operator">:</span> <span class="token string">&quot;rimraf lib&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;build:lib&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vue-cli-service build --target lib --name index --dest lib packages/index.ts&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;build:esm-bundle&quot;</span><span class="token operator">:</span> <span class="token string">&quot;rollup --config ./build/rollup.config.js&quot;</span>
<span class="token punctuation">}</span>
复制代码
</code></pre></div><p>其中 build:lib 是利用 vue-cli 进行 umd 方式打包，build:esm-bundle 是利用 rollup 进行 es 方式打包，具体参数解析如下：</p><ul><li><code>--target</code>: 构建目标，默认为应用模式。改为 <code>lib</code> 启用库模式。</li><li><code>--name</code>: 输出文件名</li><li><code>--dest</code> : 输出目录，默认 <code>dist</code>。改成 <code>lib</code></li><li><code>[entry]</code>: 入口文件路径，默认为 <code>src/App.vue</code>。这里我们指定编译 <code>packages/</code> 组件库目录。</li></ul><p>以下是完整 package.json 参考示例</p><div class="language-json"><pre><code><span class="token punctuation">{</span>
  <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;nandit-vue-vant&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;version&quot;</span><span class="token operator">:</span> <span class="token string">&quot;0.1.0&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;private&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token property">&quot;description&quot;</span><span class="token operator">:</span> <span class="token string">&quot;基于vue3+vant的前端组件库&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;main&quot;</span><span class="token operator">:</span> <span class="token string">&quot;lib/index.min.js&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;module&quot;</span><span class="token operator">:</span> <span class="token string">&quot;lib/index.esm.js&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;typings&quot;</span><span class="token operator">:</span> <span class="token string">&quot;lib/index.d.ts&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;keyword&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vue3 vant&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;license&quot;</span><span class="token operator">:</span> <span class="token string">&quot;MIT&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;author&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;jiuage&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;email&quot;</span><span class="token operator">:</span> <span class="token string">&quot;nandit@126.com&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;serve&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vue-cli-service serve&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;docs:dev&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress dev docs&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;docs:build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress build docs&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;yarn build:clean &amp;&amp; yarn build:lib &amp;&amp; yarn build:esm-bundle &amp;&amp; rimraf lib/demo.html&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;build:clean&quot;</span><span class="token operator">:</span> <span class="token string">&quot;rimraf lib&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;build:lib&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vue-cli-service build --target lib --name index --dest lib packages/index.ts&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;build:esm-bundle&quot;</span><span class="token operator">:</span> <span class="token string">&quot;rollup --config ./build/rollup.config.js&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;core-js&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^3.6.5&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;vue&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^3.0.0&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">&quot;devDependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;@rollup/plugin-node-resolve&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^13.0.5&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;@vue/cli-plugin-babel&quot;</span><span class="token operator">:</span> <span class="token string">&quot;~4.5.0&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;@vue/cli-plugin-typescript&quot;</span><span class="token operator">:</span> <span class="token string">&quot;~4.5.0&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;@vue/cli-service&quot;</span><span class="token operator">:</span> <span class="token string">&quot;~4.5.0&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;@vue/compiler-sfc&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^3.0.0&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;rollup&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.58.0&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;rollup-plugin-terser&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^7.0.2&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;rollup-plugin-typescript2&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^0.30.0&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;rollup-plugin-vue&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^6.0.0&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;sass&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^1.26.5&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;sass-loader&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^8.0.2&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;typescript&quot;</span><span class="token operator">:</span> <span class="token string">&quot;~4.1.5&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
复制代码
</code></pre></div><h4 id="_3-5-rollup-config-js"><a class="header-anchor" href="#_3-5-rollup-config-js" aria-hidden="true">#</a> 3.5 rollup.config.js</h4><p>新增 rollup.config.js，rollup 打包脚本</p><div class="language-js"><pre><code><span class="token comment">// import vue from &#39;rollup-plugin-vue&#39;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> nodeResolve <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@rollup/plugin-node-resolve&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> path <span class="token keyword">from</span> <span class="token string">&quot;path&quot;</span><span class="token punctuation">;</span>
<span class="token comment">// import commonjs from &#39;@rollup/plugin-commonjs&#39;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> terser <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;rollup-plugin-terser&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> typescript <span class="token keyword">from</span> <span class="token string">&quot;rollup-plugin-typescript2&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> pkg <span class="token keyword">from</span> <span class="token string">&quot;../package.json&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> deps <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>pkg<span class="token punctuation">.</span>dependencies<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// eslint-disable-next-line @typescript-eslint/no-var-requires</span>
<span class="token keyword">const</span> vue <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;rollup-plugin-vue&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    input<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&quot;../packages/index.ts&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    output<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        format<span class="token operator">:</span> <span class="token string">&quot;es&quot;</span><span class="token punctuation">,</span>
        file<span class="token operator">:</span> pkg<span class="token punctuation">.</span>module<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token function">terser</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token function">nodeResolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token comment">// commonjs(),</span>
      <span class="token function">vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        target<span class="token operator">:</span> <span class="token string">&quot;browser&quot;</span><span class="token punctuation">,</span>
        css<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        exposeFilename<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token function">typescript</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        tsconfigOverride<span class="token operator">:</span> <span class="token punctuation">{</span>
          compilerOptions<span class="token operator">:</span> <span class="token punctuation">{</span>
            declaration<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          include<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;packages/**/*&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;typings/shims-vue.d.ts&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          exclude<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;node_modules&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;packages/**/__tests__/*&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        abortOnError<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token function">external</span><span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^vue</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token operator">||</span> deps<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">k</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">&quot;^&quot;</span> <span class="token operator">+</span> k<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
复制代码<span class="token punctuation">;</span>
</code></pre></div><h3 id="_4-开发组件"><a class="header-anchor" href="#_4-开发组件" aria-hidden="true">#</a> 4. 开发组件</h3><p>下面以 Button 组件作为开发示例，在 packages 目录下新建 index.ts 文件和 button 文件夹，在 button 下新建 index.ts 和 src/button.vue，结构如图</p><p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5fa9445cade242e29c41ac369f7bcd12~tplv-k3u1fbpfcp-watermark.awebp?" alt="image-20211018172343510.png"></p><p>button.vue</p><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nd-btn<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$slots.default<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">&quot;nd-button&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

复制代码
</code></pre></div><p>button/index.ts，单独组件的入口文件，在其他项目可以使用 import { NdButton } from &#39;nandit-vue-vant&#39; 方式进行单个组件引用</p><div class="language-tsx"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> App <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">&quot;./src/button.vue&quot;</span><span class="token punctuation">;</span>

<span class="token comment">// 定义 install 方法， App 作为参数</span>
Button<span class="token punctuation">.</span>install <span class="token operator">=</span> <span class="token punctuation">(</span>app<span class="token operator">:</span> App<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token parameter"><span class="token keyword">void</span></span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  app<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span>Button<span class="token punctuation">.</span>name<span class="token punctuation">,</span> Button<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> Button<span class="token punctuation">;</span>

复制代码<span class="token punctuation">;</span>
</code></pre></div><p>index.ts 作为组件库的入口文件，可以在其他项目的 main.ts 引入整个组件库，内容如下</p><div class="language-tsx"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> App <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> NdButton <span class="token keyword">from</span> <span class="token string">&quot;./button&quot;</span><span class="token punctuation">;</span>

<span class="token comment">// 所有组件列表</span>
<span class="token keyword">const</span> components <span class="token operator">=</span> <span class="token punctuation">[</span>NdButton<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// 定义 install 方法， App 作为参数</span>
<span class="token keyword">const</span> install <span class="token operator">=</span> <span class="token punctuation">(</span>app<span class="token operator">:</span> App<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token parameter"><span class="token keyword">void</span></span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// 遍历注册所有组件</span>
  components<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">component</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> app<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span>component<span class="token punctuation">.</span>name<span class="token punctuation">,</span> component<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token punctuation">{</span> NdButton <span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  install<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

复制代码<span class="token punctuation">;</span>
</code></pre></div><p>这样，我们就完成一个简单的 button 组件，后续需要扩展其他组件，按照 button 的结构进行开发，并且在 index.ts 文件中 components 组件列表添加即可。</p><h3 id="_5-编写示例"><a class="header-anchor" href="#_5-编写示例" aria-hidden="true">#</a> 5. 编写示例</h3><p>组件开发完成后，我们本地先测试一下，没有问题再发布到 npm 仓库。在示例入口 main.ts 引用我们的组件库</p><div class="language-tsx"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">&quot;./App.vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> NanditVue <span class="token keyword">from</span> <span class="token string">&quot;~/index&quot;</span><span class="token punctuation">;</span> <span class="token comment">// 这里 ~ 就是在 tsconfig.json 以及 vue.config.js 配置的 packages 路径</span>

<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>NanditVue<span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">&quot;#app&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
复制代码<span class="token punctuation">;</span>
</code></pre></div><p>App.vue 删除项目初始化的 HelloWorld 组件</p><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>组件示例<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>{{ count }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nd-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>handleClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nd-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">&quot;App&quot;</span><span class="token punctuation">,</span>
  components<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      count<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">handleClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>count<span class="token operator">++</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">#app</span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> Avenir<span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
  <span class="token property">-webkit-font-smoothing</span><span class="token punctuation">:</span> antialiased<span class="token punctuation">;</span>
  <span class="token property">-moz-osx-font-smoothing</span><span class="token punctuation">:</span> grayscale<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #2c3e50<span class="token punctuation">;</span>
  <span class="token property">margin-top</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
复制代码
</code></pre></div><p>启动项目，测试一下</p><div class="language-shell"><pre><code><span class="token operator">&gt;</span> <span class="token function">yarn</span> serve
复制代码
</code></pre></div><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/298396b7da5943ccabcf5d21e9c2e4e7~tplv-k3u1fbpfcp-watermark.awebp?" alt="image-20211018175010441.png"></p><h3 id="_6-发布组件"><a class="header-anchor" href="#_6-发布组件" aria-hidden="true">#</a> 6. 发布组件</h3><p>组件开发并测试通过后，就可以发布到 npm 仓库提供给其他项目使用了，首先执行编译库命令，生成 <code>lib</code> 目录</p><div class="language-shell"><pre><code><span class="token operator">&gt;</span> <span class="token function">yarn</span> build
复制代码
</code></pre></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ab47a75408f44558bbba9baa9e96ca2a~tplv-k3u1fbpfcp-watermark.awebp?" alt="image-20211018175426389.png"></p><h4 id="_6-1-发布到-npm-官网"><a class="header-anchor" href="#_6-1-发布到-npm-官网" aria-hidden="true">#</a> 6.1 发布到 npm 官网</h4><h5 id="_6-1-1-注册-npm-账号"><a class="header-anchor" href="#_6-1-1-注册-npm-账号" aria-hidden="true">#</a> 6.1.1 注册 npm 账号</h5><p>前往<a href="https://link.juejin.cn/?target=https%3A%2F%2Fwww.npmjs.com%2F" target="_blank" rel="noopener noreferrer">官网</a>注册 npm 账号，如果已注册过，则跳过此步骤</p><h5 id="_6-1-2-登录-npm-账号"><a class="header-anchor" href="#_6-1-2-登录-npm-账号" aria-hidden="true">#</a> 6.1.2 登录 npm 账号</h5><p>在项目中 terminal 命令窗口登录 npm 账号</p><div class="language-shell"><pre><code><span class="token operator">&gt;</span> <span class="token function">npm</span> login
Username:
Password:
Email:<span class="token punctuation">(</span>this IS public<span class="token punctuation">)</span>
复制代码
</code></pre></div><p>输入在 npm 注册的账号、密码、邮箱</p><h5 id="_6-1-3-发布"><a class="header-anchor" href="#_6-1-3-发布" aria-hidden="true">#</a> 6.1.3 发布</h5><p>确保 registry 是 <a href="https://link.juejin.cn/?target=https%3A%2F%2Fregistry.npmjs.org" target="_blank" rel="noopener noreferrer">registry.npmjs.org</a></p><div class="language-shell"><pre><code><span class="token operator">&gt;</span> <span class="token function">npm</span> config get registry
复制代码
</code></pre></div><p>如果不是则先修改 registry</p><div class="language-shell"><pre><code><span class="token operator">&gt;</span> <span class="token function">npm</span> config <span class="token builtin class-name">set</span> <span class="token assign-left variable">registry</span><span class="token operator">=</span>https://registry.npmjs.org
复制代码
</code></pre></div><p>然后执行命令</p><div class="language-shell"><pre><code><span class="token operator">&gt;</span> <span class="token function">npm</span> publish
复制代码
</code></pre></div><p>如果需要删除已发布的组件（不推荐删除已发布的组件），则执行以下命令（加 <code>--force</code> 强制删除）</p><div class="language-shell"><pre><code><span class="token operator">&gt;</span> <span class="token function">npm</span> unpublish --force
复制代码
</code></pre></div><p>删除指定版本的包，比如包名为 <code>nandit-vue-vant</code> 版本 <code>0.1.0</code></p><div class="language-shell"><pre><code><span class="token operator">&gt;</span> <span class="token function">npm</span> unpublish nandit-vue-vant@0.1.0
复制代码
</code></pre></div><p>如果 24 小时内有删除过同名的组件包，那么将会发布失败，提示</p><div class="language-shell"><pre><code><span class="token function">npm</span> ERR<span class="token operator">!</span> code E403
<span class="token function">npm</span> ERR<span class="token operator">!</span> <span class="token number">403</span> <span class="token number">403</span> Forbidden - PUT https://registry.npmjs.org/nandit-vue-vant - nandit-vue-vant cannot be republished <span class="token keyword">until</span> <span class="token number">24</span> hours have passed.
<span class="token function">npm</span> ERR<span class="token operator">!</span> <span class="token number">403</span> In <span class="token function">most</span> cases, you or one of your dependencies are requesting
<span class="token function">npm</span> ERR<span class="token operator">!</span> <span class="token number">403</span> a package version that is forbidden by your security policy.

<span class="token function">npm</span> ERR<span class="token operator">!</span> A complete log of this run can be found in:
<span class="token function">npm</span> ERR<span class="token operator">!</span>     D:<span class="token punctuation">\</span>tools<span class="token punctuation">\</span>nodejs<span class="token punctuation">\</span>node_cache<span class="token punctuation">\</span>_logs<span class="token punctuation">\</span><span class="token number">2021</span>-10-18T09_58_58_933Z-debug.log
复制代码
</code></pre></div><p>只能换一个名称发布或者等 24 小时之后发布，所以不要随便删除已发布的组件（万一有项目已经引用）</p><h4 id="_6-2-发布到-npm-私服"><a class="header-anchor" href="#_6-2-发布到-npm-私服" aria-hidden="true">#</a> 6.2 发布到 npm 私服</h4><h5 id="_6-2-1-nexus-搭建-npm-私服"><a class="header-anchor" href="#_6-2-1-nexus-搭建-npm-私服" aria-hidden="true">#</a> 6.2.1 nexus 搭建 npm 私服</h5><p>使用 nexus（这里使用 nexus2）搭建 npm 私服并分配发布账号，详情请参考另一篇文章《nexus2 搭建 npm 私服》</p><h5 id="_6-2-2-修改-npm-registry"><a class="header-anchor" href="#_6-2-2-修改-npm-registry" aria-hidden="true">#</a> 6.2.2 修改 npm registry</h5><p>registry 对应于 nexus 的 npm group 的 path</p><div class="language-shell"><pre><code><span class="token operator">&gt;</span> <span class="token function">npm</span> config <span class="token builtin class-name">set</span> <span class="token assign-left variable">registry</span><span class="token operator">=</span>http://nexus.xx.com/nexus/content/groups/npm-group
复制代码
</code></pre></div><h5 id="_6-2-3-配置发布账号"><a class="header-anchor" href="#_6-2-3-配置发布账号" aria-hidden="true">#</a> 6.2.3 配置发布账号</h5><p>修改 .npmrc 文件（C:\Users\用户名.npmrc），在文件尾部加入 email、always-auth、_auth 信息</p><div class="language-shell"><pre><code><span class="token assign-left variable">registry</span><span class="token operator">=</span>http://nexus.xx.com/nexus/content/groups/npm-group
<span class="token assign-left variable">email</span><span class="token operator">=</span>youremail@xx.com
always-auth<span class="token operator">=</span>true
<span class="token assign-left variable">_auth</span><span class="token operator">=</span>dGVzdDp0ZXN0MTIz
复制代码
</code></pre></div><blockquote><p>说明：</p><p>_auth=dGVzdDp0ZXN0MTIz 是发布账号:密码的 base64 编码（比如 test:test123），可以在<a href="https://link.juejin.cn/?target=https%3A%2F%2Fc.runoob.com%2Ffront-end%2F693" target="_blank" rel="noopener noreferrer">菜鸟工具</a>在线进行 base64 编码</p><p>注意：</p><p>nexus2 搭建的 npm 私服，需要采用配置 .npmrc 方式进行发布，使用 npm login 方式会出现 401 的错误，比较麻烦。</p></blockquote><h5 id="_6-2-4-发布"><a class="header-anchor" href="#_6-2-4-发布" aria-hidden="true">#</a> 6.2.4 发布</h5><p>配置好 npm registry 和发布账号信息之后，在项目根目录执行 npm publish --registry <a href="https://link.juejin.cn/?target=http%3A%2F%2Fnexus.xx.com%2Fnexus%2Fcontent%2Frepositories%2Fnpm-hosted%2F%E5%8D%B3%E5%8F%AF%E5%8F%91%E5%B8%83%E7%BB%84%E4%BB%B6%EF%BC%8C%E8%BF%99%E9%87%8C%E9%9C%80%E8%A6%81%E6%8C%87%E5%AE%9A" target="_blank" rel="noopener noreferrer">nexus.xx.com/nexus/conte…</a> registry 为 npm 私服上的 hosted 类型的 repository</p><div class="language-shell"><pre><code><span class="token operator">&gt;</span> <span class="token function">npm</span> publish --registry http://nexus.xx.com/nexus/content/repositories/npm-hosted/
复制代码
</code></pre></div><p>也可以在 package.json 配置 publishConfig</p><div class="language-json"><pre><code><span class="token property">&quot;publishConfig&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
	<span class="token property">&quot;registry&quot;</span><span class="token operator">:</span> <span class="token string">&quot;http://nexus.xx.com/nexus/content/repositories/npm-hosted/&quot;</span>
<span class="token punctuation">}</span>
复制代码
</code></pre></div><blockquote><p>注意：</p><ol><li><code>registry</code> 需要为<code>hosted</code>类型，<strong>不能是<code>public</code></strong></li><li><code>registry</code> 地址最后的斜杠（<code>/</code>）<strong>不能省略</strong></li><li>nexus2 搭建的 npm 私服库不支持 @scope 方式发布，如@vue/vue-form，只能用 vue-form 作为组件发布名称，否则也会报 400 错误</li><li>nexus2 搭建的 npm 私服库不支持 unpublish</li></ol></blockquote><h3 id="_7-测试"><a class="header-anchor" href="#_7-测试" aria-hidden="true">#</a> 7. 测试</h3><p>另外创建一个测试项目 vue-demo</p><h4 id="_7-1-查看-registry"><a class="header-anchor" href="#_7-1-查看-registry" aria-hidden="true">#</a> 7.1 查看 registry</h4><div class="language-shell"><pre><code><span class="token operator">&gt;</span> <span class="token function">npm</span> config get registry
复制代码
</code></pre></div><p>一般是设置为 <a href="https://link.juejin.cn/?target=https%3A%2F%2Fregistry.npmjs.org%EF%BC%8C%E5%A6%82%E6%9E%9C%E6%98%AF" target="_blank" rel="noopener noreferrer">registry.npmjs.org，如果是</a> nexus 搭建的 npm 私服库，则设置为私服库 public 地址，如：<a href="https://link.juejin.cn/?target=http%3A%2F%2Fnexus.xx.com%2Fnexus%2Fcontent%2Fgroups%2Fnpm-group" target="_blank" rel="noopener noreferrer">nexus.xx.com/nexus/conte…</a></p><h4 id="_7-2-测试-install"><a class="header-anchor" href="#_7-2-测试-install" aria-hidden="true">#</a> 7.2 测试 install</h4><p>这里是为了测试 npm 私服库是否能正常 install 代理库上的依赖，选择一个 vue 项目，把 node_modules 目录删掉，然后再重新 install</p><div class="language-shell"><pre><code><span class="token operator">&gt;</span> <span class="token function">yarn</span> // 或者使用 <span class="token function">yarn</span> <span class="token function">install</span><span class="token punctuation">;</span> 或者 <span class="token function">npm</span> i
复制代码
</code></pre></div><p>如果能正常把 vue、element-ui、core-js 这些关键包 install 下来，就说明 npm 私服库可用</p><p>然后测试一下我们发布的组件</p><div class="language-shell"><pre><code><span class="token operator">&gt;</span> <span class="token function">yarn</span> <span class="token function">add</span> nandit-vue-vant // 或者使用 <span class="token function">npm</span> i -S nandit-vue-vant
复制代码
</code></pre></div><p>看看 package.json 和 node_modules 是否有 nandit-vue-vant 的数据和包，然后在 main.ts 和 App.vue 引用组件（类似示例中的代码），启动项目，测试通过，这样我们的组件库给其他项目使用也没问题了。</p><h2 id="vite-动态引入图片"><a class="header-anchor" href="#vite-动态引入图片" aria-hidden="true">#</a> vite 动态引入图片</h2><p>我现在需要动态引入图片，因此要用到模板字符串和动态绑定。第一反应，当然就是如下写法：</p><div class="language-"><pre><code>&lt;img :src=&quot;`../assets/blogPhotos/${name}.jpg`&quot; alt=&quot;&quot; /&gt;
</code></pre></div><p>但此时，控制台就报了一个错，说没有找到这张图片。</p><p>但我图片明明就放在那儿，你还说没找到。</p><p>这时一顿百度，没有找到结果。只能去 vite 的官网，没想到竟然被我找到解决方法了。</p><p>解决方法一 根据官网的提示，我找到了最简单的方法，就是在将 asset 前面加上 src。</p><div class="language-"><pre><code>&lt;img v-if=&quot;post.welcomeScreen&quot; :src=&quot;`/src/assets/blogPhotos/${name}.jpg`&quot; alt=&quot;&quot; /&gt;
</code></pre></div><p>果然还是路径写错了！</p><p>解决方法二 关于第二个方法，官网说：“实际上，Vite 并不需要在开发阶段处理这些代码！在生产构建时，Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。”</p><p>因此，以下的方法开发阶段不需要了解。</p><p>首先把给 src 绑定一个函数，然后把需要图片名字传给函数。</p><div class="language-"><pre><code>&lt;img :src=&quot;&quot; alt=&quot;getImageUrl(name)&quot; /&gt;
</code></pre></div><p>接着写这个函数</p><div class="language-"><pre><code>function getImageUrl(name) {
    return new URL(`../assets/blogPhotos/${name}.jpg`, import.<wbr>meta.url).href;

</code></pre></div><p>这里面有两个知识点：new URL 和 import.<wbr>meta.url。</p><p>new URL()</p><p>创建一个新 URL 对象的语法：</p><p>new URL(url, [base])</p><p>url —— 完整的 URL，或者仅路径（如果设置了 base）， base —— 可选的 base URL：如果设置了此参数，且参数 url 只有路径，则会根据这个 base 生成 URL。 显而易见：</p><div class="language-"><pre><code>const path = new URL(`../assets/blogPhotos/${name}.jpg`, import.<wbr>meta.url);
</code></pre></div><p>../assets/blogPhotos/${name}.jpg 是相对路径，而 import.<wbr>meta.url 是 base url （根链接）。</p><p>可以将这个 path 打印出来：</p><div class="language-"><pre><code>{
hash: &quot;&quot;
host: &quot;localhost:3000&quot;
hostname: &quot;localhost&quot;
href: &quot;http://localhost:3000/src/assets/blogPhotos/coding.jpg&quot;
origin: &quot;http://localhost:3000&quot;
password: &quot;&quot;
pathname: &quot;/src/assets/blogPhotos/coding.jpg&quot;
port: &quot;3000&quot;
protocol: &quot;http:&quot;
search: &quot;&quot;
searchParams: URLSearchParams {}
username: &quot;&quot;
}
</code></pre></div><p>其中有一个属性是 href，正好是函数的返回值！</p><p>import.<wbr>meta import.<wbr>meta 对象包含关于当前模块的信息。</p><p>它的内容取决于其所在的环境。在浏览器环境中，它包含当前脚本的 URL，或者如果它是在 HTML 中的话，则包含当前页面的 URL。</p><p>因此可以把 import.<wbr>meta 打印出来：</p><p>可以看到，它有一个属性就是 url。</p><p>综上，终于理解了上面的那个函数。</p><div class="language-"><pre><code>function getImageUrl(name) {
    return new URL(`../assets/blogPhotos/${name}.jpg`, import.<wbr>meta.url).href;
}

</code></pre></div></div></div><footer class="page-footer" data-v-7eddb2c4 data-v-fb8d84c6><div class="edit" data-v-fb8d84c6><div class="edit-link" data-v-fb8d84c6 data-v-1ed99556><!----></div></div><div class="updated" data-v-fb8d84c6><!----></div></footer><div class="next-and-prev-link" data-v-7eddb2c4 data-v-38ede35f><div class="container" data-v-38ede35f><div class="prev" data-v-38ede35f><a class="link" href="/interview/Pit/" data-v-38ede35f><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-38ede35f><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-38ede35f>踩坑</span></a></div><div class="next" data-v-38ede35f><a class="link" href="/interview/Interview/" data-v-38ede35f><span class="text" data-v-38ede35f>xxx面试</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-38ede35f><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"992e2bc4\",\"css_advanced.md\":\"157298f3\",\"css_index.md\":\"0df1ef28\",\"browser_advanced.md\":\"a7a79457\",\"browser_index.md\":\"9938c247\",\"browser_plugin.md\":\"fd27046d\",\"git_index.md\":\"fb33a92a\",\"html_advanced.md\":\"599ad3d5\",\"html_index.md\":\"c94736b6\",\"interview_index.md\":\"07dc8acc\",\"interview_two.md\":\"0ca812f6\",\"javascript_advanced.md\":\"5c434e6d\",\"javascript_index.md\":\"d996a3fc\",\"jenkins_index.md\":\"3068e232\",\"myself_index.md\":\"340fc837\",\"myself_one.md\":\"31202d59\",\"myself_pre.md\":\"aa93248e\",\"network_index.md\":\"7251e8b9\",\"network_security.md\":\"d11dae3c\",\"node_index.md\":\"e0b22fc7\",\"node_pit.md\":\"a1502c64\",\"npm_index.md\":\"59b033b6\",\"pit_index.md\":\"603d46aa\",\"solution_index.md\":\"987aa705\",\"typescript_advanced.md\":\"431b8bba\",\"typescript_combat.md\":\"60c9a8a2\",\"typescript_index.md\":\"bd88b5a2\",\"vite_index.md\":\"d6838c03\",\"vite_optimize.md\":\"49f1bb24\",\"vue_index.md\":\"380ec221\",\"vue_reactive.md\":\"206c8e46\",\"vue_router.md\":\"0d556c25\",\"vue_source.md\":\"592e192a\",\"vue_vuex.md\":\"032502ef\",\"webpack_advanced.md\":\"ae6c63b7\",\"webpack_common.md\":\"141deb7a\",\"webpack_custom.md\":\"4827ebf8\",\"webpack_index.md\":\"49f185a6\",\"webpack_optimize.md\":\"545698f9\",\"vue_source_index.md\":\"1c12bc29\",\"vue_source_nexttick.md\":\"4533a28b\",\"vue_source_watch.md\":\"0e7342fc\"}")</script>
    <script type="module" async src="/interview/assets/app.49accf37.js"></script>
  </body>
</html>